<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="stylesheet" href="../../css/style.css">
    <title>发货设置</title>
    <style>
        tr td{
            text-align: center;
        }
        .color{color:#FF0000;}

        .add{
            float: right;
            top: 40px;
        }
      	.fl{float: left;}
      	.tdbutton{width:240px;height:76px;}
        .modal-dialog{
            background-color: #ffffff;
            margin-top: 200px;
        }
        .modal-body{
            width: 500px;
            margin: 0 auto;
            color: #999999;
        }
         .modal-body .form-group input{width: 230px;height: 40px;}
         .modal-body .form-group select{height: 40px;}
         #saveAddress{width: 100px;height: 50px;font-size: 16px;}
         label.addRe{float: left;}
         input#hideRevise{width: 60px;}
        #removeAddress .modal-dialog, .modal-content,.modal-body{
        	width:500px;
        }
        #removeAddress .modal-body p{font-size: 18px;}
         #removeAddress .modal-footer{background-color:#FFFFFF;}
         #reviseAddress .modal-body {width: 400px;}
        .modal-title{text-align: left;}
        .modal-body form{width:450px;}
       .modal-body form .form-group button{border: 1px solid #999;width: 176px;height: 27px;padding: 3px;text-align: center;}
        div.modal-body form div.form-group label{width:100px;font-weight: normal;text-align: left;}
        div.modal-body form div.form-group .city,.citys{display: inline-block;}
        .operation{margin:10px;background-color: #FFFFFF;border:none;}
        button.reviseArea{width: 50px !important;}


    </style>
</head>
<body>
        <div class="configNav"></div>

    <!-- content -->
    <div class="container-fluid">
        <div class="row">
            <!-- left -->
            <div class="col-md-2">
                <div class="list-group">
                    <a href="order_index.html" class="list-group-item ">交易订单</a>
                    <a href="deliver_index.html" class="list-group-item ">发货</a>
                    <a href="address.html" class="list-group-item active">发货设置</a>
                    <a href="evaluate_admin.html" class="list-group-item ">评价管理</a>
                </div>
            </div>
        <!-- right -->
            <div class="col-md-10">
                <ol class="breadcrumb">
                    <li><a href="">商家管理中心</a></li>
                    <li><a href="">订单物流</a></li>
                    <li class="active"><a href="">发货设置</a></li>
                </ol>
                <button onclick="emptyAddForm()" class="btn btn-primary add" data-toggle="modal" data-target="#addAddress">新增地址</button>
                <div class="modal fade" id="addAddress" aria-labelledby="modaladdress" aria-hiddden="true">
                    <div class="modal-dialog">
                        <div class="modal-conent">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                                <h4 class="modal-title" id="modaladdress">新增地址</h4>
                            </div>
                            <div class="modal-body">
                                <form role="form">
                                    <div class="form-group">
                                        <label for="contacts"> <span class="color">*</span>联系人：</label>
                                        <input type="text" class="form-contorl sellerName" maxlength="10" name="contacts" >
                                    </div>
                                    <div class="form-group">
                                        <label for="area"><span class="color">*</span>所在地区：</label>
                                        <div class="city">
                                            <select class="provinceId" onchange="cityList();" ></select>
                                            <select class="cityId" onchange="distList();"  ></select>
                                            <select class="distId"  ></select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="street" ><span class="color">*</span>街道地址：</label>
                                        <input type="text" class="form-contrl streetAddress" maxlength="10" name="street">
                                        <p style="font-size:12px;color:#999; margin-left:100px;margin-top:5px;">不必重复填写地区</p>
                                    </div>
                                    <div class="form-group">
                                        <label for=""><span class="color" >*</span>电  话：</label>
                                        <input type="text" class="form-contorl telphone" maxlength="11" name="telphone">
                                        <span class="cardCheckMsg"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="company">公  司：</label>
                                        <input type="text" class="form-contorl company" maxlength="10" name="company">
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <div>
                                    <button id="saveAddress" type="button" class="btn- btn-success">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                <ul class="nav nav-tabs">
                    <li class="chose"><a href="javascript:;">地址库</a></li>
                    <!-- <li><a href="logistics.html">默认物流公司</a></li>
                    <li><a href="baoyou.html">免运费额度</a></li>
                    <li><a href="dayinfahuodan.html">发货单打印设置</a></li> -->
                </ul>

                <table class="table table-bordered ">
                    <thead>
                        <tr>
                            <td class="col-md-1">是否默认</td>
                            <td class="col-md-1" >联系人</td>
                            <td class="col-md-2 ">发货地址</td>
                            <td class="col-md-1">电话</td>
                            <td class="col-md-1">操作</td>
                        </tr>
                    </thead>
                    <tbody id="addresslibrary">

                    </tbody>
                </table>
                <nav aria-label="...">
                    <div class="">
                      <span id="pageNum">共&nbsp;<strong></strong>&nbsp;页&nbsp;/&nbsp;</span><span id="totalNum">&nbsp;<strong>0</strong>&nbsp;条数据</span>
                    </div>
                    <ul id="example"></ul>
                  </nav>
            </div>

         </div>
    </div>
    <script src="../../js/jquery.min.js" charset="utf-8"></script>
    <script src="../../js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../../plugin/layer/layer.js" charset="utf-8"></script>
    <script src="../../plugin/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js" charset="utf-8"></script>
    <script src="../../plugin/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js" charset="utf-8"></script>
    <script src="../../plugin/wangEditor/release/wangEditor.min.js" charset="utf-8"></script>
    <script src="../../js/nav.js" charset="utf-8"></script>
    <script src="../../js/common.js" charset="utf-8"></script>
    <script src="../../js/bootstrap-paginator.js" charset="utf-8"></script>
    <script src="../../js/ajax.js" charset="utf-8"></script>
        <script>
        	var defaultAddressId = 0;
		 $(document).ready(function() {
	    		tableList()
	        });
        	var pageUrls =cncbk_common_tools.serverURL + '/business/store/queryAddress';
            function tableList(){
            	
                    //分页
                    data = {
                        'sellerName':$('#sellerName').val(),
                        'telphone':$('#telphone').val(),
                        'page': page,
                        'pageSize': pagesize
                    }
                data.page = 1
                ajax(
                    pageUrls,
                    data,
                    pageNumList,
                    'post',
                    'json'
                )
            }
		//新增地址
        $('#saveAddress').click(function () {
		    var pageUrls = cncbk_common_tools.serverURL + '/business/store/addAddress';
		    var sellerName= $('[name="contacts"]').val();//联系人
		    var provinceId=$('.provinceId').val();//省ID
		    var cityId=$('.cityId').val();//市ID
            var areaId=$('.distId').val();//区ID
            var province=$('.provinceId Option:selected ').html();//省
		    var city=$('.cityId Option:selected ').html();//市
            var area=$('.distId Option:selected ').html();//区
		    var areaInfo = province +' '+ city+' '+area;
		    var address = $('[name="street"]').val();
		    var telphone=$('[name="telphone"]').val();
		    var company=$('[name="company"]').val();		
		    
		    //手机号码验证
			var userphone = /^[1][34578][0-9]{9}$/;
			if(!userphone.test(telphone)) {
				$('.cardCheckMsg').text('手机号格式有误').css('color', 'red');
				return;
			} 
		    console.log(telphone)
		    data = {
		        'sellerName':sellerName,
		        'provinceId':provinceId,
		        'cityId':cityId,
		        'areaId':areaId,
		        'areaInfo':areaInfo,
		        'address':address,
		        'telphone':telphone,
		        'company':company,
		        'isDefault':1
		    }
		    var fun = function (res) {
		        if(res.code==200){
		            $('.close').click();
		            $('[name="telphone"]').val('');
		            $('.cardCheckMsg').text('');
   					setTimeout(tableList(),5000)
		        }
		    }
		    ajax(
		        pageUrls,
		        data,
		        fun,
		        'post',
		        'json'
		    )
		})
            //数据渲染
            function OpendList(res){
                $('#addresslibrary').empty()
                var html='';
                for (var  i = 0; i < res.data.list.length; i++) {

                    html += '<tr >'+
                        '<td class="col-md-1">'+
                        '<div class="form-group">'+
                        '<label for=""></label>';
                        if(res.data.list[i].isDefault==1){
                        	defaultAddressId = res.data.list[i].addressId;
                        	html += '<input type="radio"  name="default" value="1" onclick="defaultAdd(this);" addressId="'+res.data.list[i].addressId+'" checked="checked"> 默认';
                        }else{
                        	html += '<input type="radio"  name="default" value="1" onclick="defaultAdd(this);" addressId="'+res.data.list[i].addressId+'" > 默认';
                        }
                        html+=
                        '</div>'+
                        '</td>'+
                        '<td class="col-md-1" id="sellerName">'+ res.data.list[i].sellerName+'</td>'+
                        '<td class="col-md-2 " id="areaInfo">'+ res.data.list[i].areaInfo + res.data.list[i].address +res.data.list[i].company +'</td>'+
                        '<td class="col-md-1 " id="telphone">'+ res.data.list[i].telphone+'</td>'+
                        '<td class="col-md-1 ">'+
                        '<div class="tdbutton">'+
                        //删除strat
                        '<button class="operation add tc"  data-toggle="modal" data-target="#removeAddress" addressId="'+res.data.list[i].addressId+'" ><i class="glyphicon glyphicon-remove"></i><br>删除</button>'+
							'<div class="modal fade" id="removeAddress" aria-labelledby="modaladdress" aria-hiddden="true">'+
							'<div class="modal-dialog">'+
							'<div class="modal-conent">'+
							'<div class="modal-header alert alert-warning">'+
							'<button type="button" class="close myClose" style="display:none;" data-dismiss="modal" aria-hidden="true">X</button>'+
							'<h4 class="modal-title" id="modaladdress">提示</h4>'+
							'</div>'+
							'<div class="modal-body">'+
							'<p >是否删除此地址?</p>'+
							'</div>'+
							'<div class="modal-footer">'+
							'<div>'+
							'<button id="yesRemove" type="button" addressId="'+res.data.list[i].addressId+'" class="btn fl" >确定</button>'+
							'<button id="noRemove" type="button"  addressId="'+res.data.list[i].addressId+'" class="btn ">取消</button>'+
							'</div>'+
							'</div>'+
							'</div>'+
							'</div>'+
							'</div>'+
						//删除end
                        //编辑strat
		                '<button class="operation add reviseAddress tc" data-toggle="modal" data-target="#reviseAddress" addressId="'+res.data.list[i].addressId+'" ><i class="glyphicon glyphicon-pencil"></i><br>编辑</button>'+
							'<div class="modal fade" id="reviseAddress" aria-labelledby="modaladdress" aria-hiddden="true">'+
							'<div class="modal-dialog">'+
							'<div class="modal-conent">'+
							'<div class="modal-header">'+
							'<button type="button" class="close myClose" data-dismiss="modal" aria-hidden="true">X</button>'+
							'<h4 class="modal-title" id="modaladdress">修改地址</h4>'+
							'</div>'+
							'<div class="modal-body">'+
							'<form role="form">'+
							'<div class="form-group addRe">'+
							'<label for="contacts" class="addRe"> <span class="color">*</span>联系人：</label>'+
							'<input type="text" class="form-contorl  sellerName" maxlength="10" name="revisecontacts">'+
							'</div>'+
							'<div class="form-group areaGroup">'+
							'<label for="area" class="addRe"><span class="color">*</span>所在地区：</label>'+
							'<span name="areaInfoSpan" id="hideArea"></span>'+
							'<input type="button" value="编辑" onclick="updateInit()"  addressId="'+res.data.addressId+'" id="hideRevise" />'+
							'<div class="citys1" style="display: inline-block; ">'+
							'<select class="provinceId1"  onchange="cityList1(); " style="display:none; "></select>'+
							'<select class="cityId1"  onchange="distList1();" style="display:none; "></select>'+
							'<select class="distId1"  style="display:none; "></select>'+
							'</div>'+
							'</div>'+
							'<div class="form-group">'+
							'<label for="street" class="addRe"><span class="color">*</span>街道地址：</label>'+
							'<input type="text" class="form-contrl streetAddress" maxlength="10" name="revisestreet">'+
							'<p style="font-size:12px;color:#999; margin-left:100px;margin-top:5px;">不必重复填写地区</p>'+
							'</div>'+
							'<div class="form-group">'+
							'<label for="" class="addRe"><span class="color">*</span>电  话：</label>'+
							'<input type="text" class="form-contorl telphone" maxlength="11" name="revisetelphone">'+
							'<span class="cardCheckMsg2"></span>'+
							'</div>'+
							'<div class="form-group">'+
							'<label for="company" class="addRe">公  司：</label>'+
							'<input type="text" class="form-contorl company" maxlength="10" name="revisecompany">'+
							'</div>'+
							'</form>'+
							'</div>'+
							'<div class="modal-footer">'+
							'<div>'+
							'<button id="saveReviseAddress" type="button" addressId="'+res.data.list[i].addressId+'" class="btn btn-success" >保存</button>'+
							'</div>'+
							'</div>'+
							'</div>'+
							'</div>'+
							'</div>'+
							//编辑end
							'</div>'+
                        '</td>'+
                        '</tr>';
                }
                $('#addresslibrary').append(html);
                
                //设置默认地址
                defaultAdd = function (obj){  
                	if (defaultAddressId == $(obj).attr('addressId')) {
                		return;
                	}
                	defaultAddressId= $('input[name="default"]:checked').attr('addressId');	
                	var pageUrls=cncbk_common_tools.serverURL + '/business/store/setDefaultAddress';
                	data = {'addressId':defaultAddressId}
                	var fundefauleAdd = function(res){
                		console.log(res)
                	}
                	ajax(
                		pageUrls,
                		data,
                		fundefauleAdd,
                		'post',
                		'json'
                	)
                }      
                //获取商家地址详细接口
                $('.reviseAddress').click(function(){
                	var pageUrls = cncbk_common_tools.serverURL + '/business/store/getAddressInfo';
                	var id = $(this).attr('addressId');//id
                	$(".provinceId1").val();
                	data={'id':id}
                	var funs = function (res) {
	                    $('[name="revisecontacts"]').val(res.data.sellerName);//联系人
					    $('[name="areaInfoSpan"]').html(res.data.areaInfo);//联系人
					    $('[name="revisestreet"]').val(res.data.address);
					    $('[name="revisetelphone"]').val(res.data.telphone);
					    $('[name="revisecompany"]').val(res.data.company);
	                }
                	ajax(
				        pageUrls,
				        data,
                        funs,
				        'post',
				        'json'
		    		)
                })

             //修改地址saveReviseAddress
			$('#saveReviseAddress').click(function(){
				 	var pageUrls = cncbk_common_tools.serverURL + '/business/store/updateAddress';
				 	var id = $(this).attr('addressId');//id
				    var sellerName= $('[name="revisecontacts"]').val();//联系人
				    var provinceId=$('.provinceId1').val();//省ID
				    var cityId=$('.cityId1').val();//市ID
				    var areaId=$('.distId1').val();//区ID
				    var province=$('.provinceId1 option:selected').html();//省
                    var city=$('.cityId1 option:selected').html();//市
                    var dist=$('.distId1 option:selected').html();//区
                    var areaInfo = province +' '+ city+' '+dist;
				    var adress = $('[name="revisestreet"]').val();
				    var telphone=$('[name="revisetelphone"]').val();
				    var company=$('[name="revisecompany"]').val();
					   
				    //手机号码验证
					var userphone = /^[1][34578][0-9]{9}$/;
					if(!userphone.test(telphone)) {
						$('.cardCheckMsg2').text('手机号格式有误').css('color', 'red');
						return;
					} 
	
				    data={
				    	   'sellerName':sellerName,
				    	   	'addressId':id,
					        'provinceId':provinceId,
					        'cityId':cityId,
					        'areaId':areaId,
					        'areaInfo':areaInfo,
					        'address':adress,
					        'telphone':telphone,
					        'company':company,
					        'isDefault':1
				    }

				      var fun = function (res) {
					        if(res.code==200){
					            $('.myClose').click();
					            $('[name="telphone"]').val('');
		            		$('.cardCheckMsg2').text('');
					           	location.reload();
					        }
					    }
				    ajax(
					        pageUrls,
					        data,
					        fun,
					        'post',
					        'json'
		    		)
			})
                	//删除地址
                	$('#yesRemove').click(function(){
				 	var pageUrls = cncbk_common_tools.serverURL + '/business/store/delAddress';
				    var id = $(this).attr('addressId');//cityId
					 console.log(id)
				    data={'id':id,}
				    var fun = function (res) {
					    if(res.code==200){
				            $('.close').click();
				            location.reload();
					    }
					}
				    ajax(
					        pageUrls,
					        data,
					        fun,
					        'post',
					        'json'
		    		)
			})
                	//取消删除
                	$('#noRemove').click(function(){
                		$('.close').click()
                	})
            }
             function provinceList() { //获取省份
                var pageUrls =cncbk_common_tools.serverURL + '/common/getArea';
//              var provinceId=$('.provinceId').val();
                data={}
                var funSucc=function(datas){
                    if (datas !='') {
                         $(".provinceId").empty();
                            $(".provinceId").append("<option value=''>请选择省份</option>");
                            $.each(datas.data.list,function(i,data){
                                $(".provinceId").append("<option value='"+data.id+"'>"+data.name+"</option>");
                            });
                        }
                }
                ajax(
                    pageUrls,
                    data,
                    funSucc,
                    'post',
                    'json'
                    )
            }
    		$(document).ready(function(){
                tableList();
           });
            function cityList(){  //获取市
                var pageUrls =cncbk_common_tools.serverURL + '/common/getArea';
                var provinceId=$('.provinceId').val();
                data={'parentId':provinceId}
                var funCity = function(datas){
                    if(datas != ""){
                            $(".cityId").empty();
                            $(".cityId").append("<option value=''>请选择城市</option>");
                            $.each(datas.data.list,function(i,data){
                                $(".cityId").append("<option value='"+data.id+"'>"+data.name+"</option>");
                            });
                        }
                }
                ajax(
                    pageUrls,
                    data,
                    funCity,
                    'post',
                    'json'
                    )

			}
           	function distList(){//获取区
                   var pageUrls =cncbk_common_tools.serverURL + '/common/getArea';
                     var cityId=$('.cityId').val();
                    data={'parentId':cityId}
			         var funDist =function(datas){
                        if(datas != ""){
                            $(".distId").empty();
                            $(".distId").append("<option value=''>请选择区域</option>");
                            $.each(datas.data.list,function(i,data){
                                $(".distId").append("<option value='"+data.id+"'>"+data.name+"</option>");
                            });
                        }
                     }
                     ajax(
                        pageUrls,
                        data,
                        funDist,
                        'post',
                        'json'
                        )
			}      
			//点击编辑显示三级联动

           function updateInit(){
                $('.provinceId1').show();
                $('.cityId1').show();
                $('.distId1').show();
                $(".cityId1").empty();
                $(".distId1").empty();
                provinceList1();
                $('#hideArea').hide();
                $('#hideRevise').hide();
            }
		  function provinceList1(){
	               var pageUrls =cncbk_common_tools.serverURL + '/common/getArea';
	//                  var provinceId=$('.provinceId1').val();
	                      data={}
	                    var funSucc=function(datas){
	                        if (datas !='') {
	                             $(".provinceId1").empty();
	                                $(".provinceId1").append("<option value=''>请选择省份</option>");
	                                $.each(datas.data.list,function(i,data){
	                                    $(".provinceId1").append("<option value='"+data.id+"'>"+data.name+"</option>");
	                                });
	                            }
	                    }
	                    ajax(
	                        pageUrls,
	                        data,
	                        funSucc,
	                        'post',
	                        'json'
	                        )
	          }
		        function cityList1(){  //修改地址部分获取市
                 var pageUrls =cncbk_common_tools.serverURL + '/common/getArea';
                    var provinceId=$('.provinceId1').val();
                    data={'parentId':provinceId}
                    var funCity = function(datas){
                        if(datas != ""){
                                $(".cityId1").empty();
                                $(".cityId1").append("<option value=''>请选择城市</option>");
                                $.each(datas.data.list,function(i,data){
                                    $(".cityId1").append("<option value='"+data.id+"'>"+data.name+"</option>");
                                });
                            }
                    }
                ajax(
                    pageUrls,
                    data,
                    funCity,
                    'post',
                    'json'
                    )
            }
		       function distList1(){//修改地址部分获取区
                var pageUrls =cncbk_common_tools.serverURL + '/common/getArea';
                     var cityId=$('.cityId1').val();
                    data={'parentId':cityId}
                     var funDist =function(datas){
                        if(datas != ""){
                            $(".distId1").empty();
                            $(".distId1").append("<option value=''>请选择区域</option>");
                            $.each(datas.data.list,function(i,data){
                                $(".distId1").append("<option value='"+data.id+"'>"+data.name+"</option>");
                            });
                        }
                     }
                     ajax(
                        pageUrls,
                        data,
                        funDist,
                        'post',
                        'json'
                        )
			}

			/*再次添加前清除原有内容*/
			function emptyAddForm(){
				$('[name="contacts"]').val("");
		   		$(".provinceId").empty();
				$(".cityId").empty();
				$(".distId").empty();
		    	$('[name="street"]').val("");
		    	$('[name="phone"]').val("");
		   		$('[name="company"]').val("");
				provinceList();
			}

        </script>
</body>
</html>
